<?xml version="1.0"?>
<jsp:root 	xmlns:jsp="http://java.sun.com/JSP/Page"
			xmlns:sql="http://java.sun.com/jsp/jstl/sql"
			xmlns:c="http://java.sun.com/jsp/jstl/core" 
			xmlns:fmt="http://java.sun.com/jsp/jstl/fmt"
			xmlns:fn="http://java.sun.com/jsp/jstl/functions"
			version="2.1">
	<jsp:directive.page contentType="text/html; charset=UTF-8" />
	<jsp:directive.page isELIgnored="false" />
	<jsp:output omit-xml-declaration="false"
		doctype-root-element="html"
		doctype-public="-//W3C//DTD XHTML 1.1//EN"
		doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd" /> 	
		
	<jsp:useBean id="userBean" class="es.albarregas.beans.UserBean" scope="session" />	
	

	
<!--[if lt IE 8]>      <html class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]>         <html class="no-js lt-ie10"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8" />
    <title>Ikex | Pago</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Ikex Furniture Store" />
    <meta name="author" content="Josu Becerra" />
    
    <jsp:useBean id="provinciasList" class="es.albarregas.beans.ProvinciasListBean" scope="session" />

	<!-- Favicon y Apple touch icons (botones para Ipad y Iphone) -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/apple-touch/144.png" ></link>
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/apple-touch/114.png" ></link>
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/apple-touch/72.png" ></link>
    <link rel="apple-touch-icon-precomposed" href="images/apple-touch/57.png" ></link>
    <link rel="shortcut icon" href="images/favicon.png" ></link>

    <!--  Google Fonts  -->
    <link href='http://fonts.googleapis.com/css?family=Pacifico|Open+Sans:400,700,400italic,700italic&amp;subset=latin,latin-ext,greek' rel='stylesheet' type='text/css' />
    
    
    <!-- Twitter Bootstrap; librería ventanas JQuery-->
    <link href="css/bootstrap.css" rel="stylesheet" ></link>
    <link href="css/responsive.css" rel="stylesheet" ></link>
    <!-- Slider Revolution -->
    <link rel="stylesheet" href="js/rs-plugin/css/settings.css" type="text/css" ></link>
    <!-- jQuery UI -->
    <link rel="stylesheet" href="js/jquery-ui-1.10.3/css/smoothness/jquery-ui-1.10.3.custom.min.css" type="text/css" ></link>
    <!-- PrettyPhoto -->
    <link rel="stylesheet" href="js/prettyphoto/css/prettyPhoto.css" type="text/css" ></link>
    <!-- main styles -->
     
    <link href="css/main.css" rel="stylesheet" ></link>
     
     <!-- JQuery -->
	<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
	<script type="text/javascript" src="js/jquery.min.js"><jsp:text /></script>

    <!-- Modernizr, librería que le dice al navegador cómo actuar si no soporta la funcionalidad de la página 
    <script src="js/modernizr.custom.56918.js"></script>    -->
 	
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  
  </head>

   
  <body class="checkout-page">
   
    
   <!-- Carrito  -->
	<jsp:useBean id="listaPedidosBean" class="es.albarregas.beans.PedidoListBean" scope="session" />
	
	<jsp:setProperty property="clausulaWhere" name="listaPedidosBean" value="where user_oid=${userBean.oid} and confirmado=false" />
	  
	<c:if test="${userBean.oid != 0}">
		<c:set var="clausula" 	value=" where user_oid=${userBean.oid} and confirmado=false" />
		<jsp:setProperty property="clausulaWhere" name="listaPedidosBean" value="${clausula}" />
		<c:set var="oidPedido" value="0" />
		<c:set var="totalPedido" value="0"></c:set>
		<c:forEach var="registros" items="${listaPedidosBean.pedido}">
			<c:set var="oidPedido" value="${registros.oid}" />
			<c:set var="totalPedido" value="${registros.total }"></c:set>
			<c:set var="elPedido" value="${registros}"></c:set>
		</c:forEach>
		<c:if test="${oidPedido != 0}">
			<jsp:useBean id="listaLineasPedidoBean" class="es.albarregas.beans.LineasPedidoListBean" scope="session" />
			<c:set var="clausula2" value="where pedido_oid=${oidPedido}" />	
			<jsp:setProperty property="clausulaWhere" name="listaLineasPedidoBean" value="${clausula2}" />
		</c:if>		
    </c:if>  
    
   	<jsp:useBean 
      id="direccionBean"
      class="es.albarregas.beans.DireccionBean"
      scope="session">  
    </jsp:useBean>
    <jsp:setProperty name="direccionBean" property="*" />
    
    <jsp:useBean 
      id="tarjetaBean"
      class="es.albarregas.beans.TarjetaBean"
      scope="session">  
    </jsp:useBean>
    <jsp:setProperty name="tarjetaBean" property="*" />
    
    <div class="container">
        <div class="row">
        	            
            <!--  ==========  -->
            <!--  = Main content =  -->
            <!--  ==========  -->
            <section class="span12">
                
                <div class="checkout-container">
                    <div class="row">
                    	<div class="span10 offset1">
                    	    
                    	    <!--  ==========  -->
							<!--  = Header =  -->
							<!--  ==========  -->
                    		<header>
                    		    <div class="row">
                    		    	<div class="span2">
                    		    		<a href="index.jsp"><img src="images/logo-ikex.png" alt="Ikex Logo" title="Volver a Inicio" width="100px" /><jsp:text /></a><br/>
                    		    		<a href="index.jsp">Seguir comprando</a>
                    		    	</div>
                    		    	<div class="span6">
                    		    	    <div class="center-align">
                    		    	        <h1><span class="light">Método de</span> Pago</h1>
                    		    	    </div>
                    		    	</div>
                    		    	<div class="span2">
                    		    	    <div class="right-align">
                    		    	    	<img src="images/buttons/security.jpg" alt="Authentic secure" width="92" height="65" />
                    		    	    </div>
                    		    	</div>
                    		    </div>
                    		</header>
                    		
                    		<!--  ==========  -->
							<!--  = Pasos =  -->
							<!--  ==========  -->
                    		<div class="checkout-steps">
                    		    <div class="clearfix">
                    		    	<div class="step done">
                    		    	    <div class="step-badge"><i class="icon-ok"><jsp:text /></i></div>
                    		    	    <a href="carrito.jsp">Revisar Carrito</a>
                    		    	</div>
                    		    	<div class="step done">
                    		    	    <div class="step-badge"><i class="icon-ok"><jsp:text /></i></div>
                    		    	    <a href="direccion.jsp">Dirección de Envío</a>
                    		    	</div>
                    		    	<div class="step active">
                                        <div class="step-badge">3</div>
                                        Método de Pago
                                    </div>
                    		    	<div class="step">
                    		    	    <div class="step-badge">4</div>
                    		    	    Confirmar y Pagar
                    		    	</div>
                    		    </div>
                    		</div> <!-- /steps -->
                    		
						    <!--  ==========  -->
							<!--  = Pago   =  -->
							<!--  ==========  -->
							<span class="btn btn-danger circle pull-left"><i class="icon-chevron-down"><jsp:text /></i></span>
							<form action="confirmar.jsp" method="post" class="form-horizontal form-checkout" name="tarjetaForm" id="tarjetaForm" >
							<div class="shifted-left-45 clearfix">
							    <h3 class="no-margin"><span class="light">Tarjeta de</span> Crédito</h3>
							    <p class="push-down-30">Aceptamos tarjetas MasterCard, Visa y 4B</p>
							    
							    
                                    <div class="control-group">
                                        <label class="control-label" for="nombre">Nombre<span class="red-clr bold">*</span></label>
                                        <div class="controls">
                                            <input type="text" id="nombre" name="nombre" class="span4" value="${tarjetaBean.nombre }" />
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label" for="apellidos">Apellidos<span class="red-clr bold">*</span></label>
                                        <div class="controls">
                                            <input type="text" id="apellidos" name="apellidos" class="span4"  value="${tarjetaBean.apellidos }" />
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label" for="numTarjeta">Número de Tarjeta<span class="red-clr bold">*</span></label>
                                        <div class="controls" id="numTarjeta">
                                            <input type="text" id="bloque1" name="bloque1" class="span1 card-num-input center-align"  maxlength="4" value="${tarjetaBean.bloque1 }"/>
                                            <input type="text" id="bloque2" name="bloque2" class="span1 card-num-input center-align" maxlength="4" value="${tarjetaBean.bloque2 }" />
                                            <input type="text" id="bloque3" name="bloque3" class="span1 card-num-input center-align" maxlength="4" value="${tarjetaBean.bloque3 }"  />
                                            <input type="text" name="bloque4" id="bloque4" class="span1 card-num-input center-align add-tooltip" maxlength="4" value="${tarjetaBean.bloque4 }" data-title="Los 16 dígitos en el frente de la tarjeta" />
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label" for="cvc">Código de Verificación<span class="red-clr bold">*</span></label>
                                        <div class="controls">
                                            <input id="cvc" name="cvc" type="text" class="span1 center-align add-tooltip" maxlength="3" value="${tarjetaBean.cvc }" data-title="Últimos 3 dígitos en el reverso de la tarjeta" />
                                        </div>
                                    </div>
                                    <c:set var="arrayMeses" value="${fn:split('01,02,03,04,05,06,07,08,09,10,11,12', ',')}" scope="application" />
                                    <div class="control-group" id="grupoCaducidad">
                                        <label class="control-label" for="caducidad">Fecha de Caducidad<span class="red-clr bold">*</span></label>
                                        <div class="controls">
                                            <select id="caducidad" name="mesCaducidad" class="input-small month-push-right">
                                                <option value="" />Mes
                                                <c:forEach var="mes" items="${arrayMeses}" >
                                                	<c:choose>
	                      								<c:when test="${tarjetaBean.mesCaducidad == mes}">
															<option value="${mes }" selected="selected" >${mes }</option>
														</c:when>
														<c:otherwise>
															<option value="${mes }" >${mes }</option>
														</c:otherwise>
													</c:choose>
                                                	
                                                </c:forEach>
                                                   
                                                 
                                            </select>
                                            
                                            <!-- Otengo el año actual -->
                                            <jsp:useBean id="now" class="java.util.Date" />
                                            <fmt:formatDate var="yearNow" value="${now}" pattern="yyyy" />  
                                            <c:set var="arrayAnios">${yearNow },${yearNow +1 },${yearNow +2 },${yearNow +3 },${yearNow +4 },${yearNow +5 },${yearNow +6 }</c:set>
                                            
                                            <select name="anioCaducidad" id="anioCaducidad" class="input-small">
                                                <option value="" />Año
                                                <c:forEach var="anio" items="${arrayAnios}" >
                                                	<c:choose>
	                      								<c:when test="${tarjetaBean.anioCaducidad == anio}">
															<option value="${anio }" selected="selected">${anio }</option>
														</c:when>
														<c:otherwise>
															<option value="${anio }" >${anio }</option>
														</c:otherwise>
													</c:choose>
                                                	  
                                                </c:forEach>
                                                 
                                            </select>
                                        </div>
                                    </div>
                                
							</div>
							
							<hr />
							
							<span class="btn btn-danger circle pull-left"><i class="icon-chevron-right"><jsp:text /></i></span>
							<div class="shifted-left-45 clearfix">
                                <h3 class="no-margin">
                                    <span class="light">PayPal </span> &#160; &#160; &#160;
                                    <a href="#"><img src="images/buttons/paypal.gif" alt="PayPal" width="145" height="42" /><jsp:text /></a>
                                </h3>
                            </div>
                            
                            <hr />
						    
						    <p class="right-align">
						        En el próximo paso podrás revisar y confirmar el pedido &#160; &#160;
						        <input type="submit" class="btn btn-primary higher bold" value="CONTINUAR" />
						    </p>
							    
						 </form>   
                    	</div>
                    </div>
                </div>
                
                
            </section> <!-- /main content -->
        
        </div>
    </div> <!-- /container -->
    
     
    
     
    


    <!--  ==========  -->
    <!--  = JavaScript =  -->
    <!--  ==========  -->
    <jsp:include page="include/js.jsp" />
    
    <!-- Scripts de validación JavaScript -->
	<script src="js/validacion.js"><jsp:text /></script> 

  </body>
</html>
</jsp:root>
    
    